<template>
    <div>
        <div style="width: 100%; height: 400px;">
            <amap cache-key="map" 
            view-mode="2D" 
            map-style="amap://styles/whitesmoke" 
            async 
            :zoom.sync="zoom"
            :center.sync="center" 
            :pitch.sync="pitch" 
            is-hotspot
             @hotspotclick="onHotspotClick">
            <amap-marker :position="position" :label="{
                    content: '上海市浦东新区盛夏路608号3幢307-308室',
                    direction: 'bottom',
                }" />
            </amap>
        </div>
    </div>
</template>
  
<script>
// your-component.vue
import { Amap, Marker } from '@amap/amap-vue';

export default {
    components: {
        Amap,
        AmapMarker: Marker,
    },
    data() {
        return {
            center: [121.629001, 31.20885],
            position: [121.629001, 31.20885],
            zoom: 16,
            pitch: 45,
        };
    },
    mounted(){
        console.log(this.$refs.contain1)
    },
    methods: {
        onHotspotClick(e) {
            if (e && e.lnglat) {
                this.center = [e.lnglat.lng, e.lnglat.lat];
            }
        },
    },
};
</script>
  